<template>
  <view class="page">
      <view class="container">
        <view class="list" v-if="invoiceList.length > 0">
          <view class="item" v-for="(item, index) in invoiceList" :key="index">
              <view class="top">
                <view class="date">{{item.add_time}}</view>
                <view class="status">已开票</view>
              </view>
              <view class="middle">
                <view class="main-box">
                  <image :src="item.type_pic" />
                  <view class="main-right">
                      <view class="name">{{item.type_name}}</view>
                      <view class="desc">{{item.seat_num}}座/{{item.door}}门/{{gearObj[item.gear]}}</view>
                  </view>
                </view>
               <view class="use-time">用车时间：{{item.start_time}}-{{item.end_time}}</view>
               <view class="info">{{item.title}}</view>
              </view>
              <view class="bottom">
                <view class="price"><text>¥</text>{{item.price_month}}</view>
                <view class="btn" @tap="viewInvoice(item)">查看开票</view>
              </view>
          </view>
        </view>
        <view class="no-tenant-box" v-else>
          <image src="../static/no_coupon.png" class="no-tenant-img" />
          <view class="text">您暂无可开票订单</view>
        </view>
      </view>
  </view>
</template>

<script>
  import {
  	invoiceOrder
  } from '@/api/user.js';
  import {
  	orderInvoiceList
  } from '@/api/order.js'
  
	export default {
      data() {
        return {
          date: '',
          invoiceList: [],
          nav: 1, // 1：发票记录 2：抬头管理
          page: 1,
          limit: 30,
          loading: false,
          finished: false,
          navList: [
            {
              title: '发票抬头',
              image: '../static/invoice_img1.png',
              path: '/pages/users/invoice/title'
            },
            {
              title: '发票历史',
              image: '../static/invoice_img2.png',
              path: '/pages/users/invoice/history'
            },
            {
              title: '常见问题',
              image: '../static/invoice_img3.png',
              path: '/pages/users/invoice/question'
            },
          ],
          gearObj: {
            'auto': '自动挡',
            'hand': '手动挡'
          }
        }
      },
      onLoad(){
        console.log('onLoad')
      },
      onShow(){
         console.log('onShow')
         this.getInit()
      },
      methods: {
              goPage(item){
                  if(item.path){
                    uni.navigateTo({
                      url: item.path
                    })
                  }
              },
              getInit(){
                this.page = 1;
                this.loading = false;
                this.invoiceList = []
                this.getInvoiceList()
              },
              // 记录列表
              getInvoiceList() {
              	uni.showLoading({
              		title: this.$t(`加载中`)
              	});
              	orderInvoiceList({
              		// page: this.page,
              		// limit: this.limit,
                  is_invoice: 1 // is_invoice  0是开票管理 1是开票历史
              	}).then(res => {
                  console.log('res', res)
              		// const {
              		// 	data
              		// } = res;
                  const data  = res.data;
              		uni.hideLoading();
                  console.log('data', data)
              		if(data) this.invoiceList = data;
              		this.finished = data.length < this.limit;
              		this.page += 1;
              	}).catch(err => {
              		uni.showToast({
              			title: err.msg,
              			icon: 'none'
              		});
              	});
              },
              viewInvoice(item){
                console.log('item', item)
                uni.navigateTo({
                  url: `/pages/users/invoice/history_detail?detail=` + encodeURIComponent(JSON.stringify(item))
                })
              }
      }
	}
</script>

<style lang="scss" scoped>
	page {
    min-height: 100vh;
		background-color: rgb(248,249,252);
	}
  .no-tenant-box{
    .no-tenant-img{
      width: 360rpx;
      height: 360rpx;
      display: block;
      margin: 200rpx auto 10rpx;
    }
    .text{
      text-align: center;
      font-size: 26rpx;
      color: #B9B9BD;
    }
  }
	.container {
		padding: 32rpx;
	}
  .list{
    
  }
  .item{
    background: #FFF;
    font-size: 28rpx;
    color: rgba(0,0,0,0.9);
    padding: 32rpx 28rpx;
    border-radius: 10rpx;
    margin-bottom: 24rpx;
    .top{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 24rpx;
      border-bottom: 1rpx solid #E7E7E7;
      .date{
        font-weight: 400;
        font-size: 28rpx;
        color: rgba(0,0,0,0.6);
      }
      .status{
        font-weight: 500;
        font-size: 28rpx;
        color: rgba(0,0,0,0.9);
      }
    }
    .middle{
      padding: 24rpx 0;
      .main-box{
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;
        image{
          width: 332rpx;
          height: 160rpx;
          margin-right: 16rpx;
          border: 1rpx solid #ccc;
          box-sizing: border-box;
          border-radius: 4rpx;
        }
        .main-right{
          .name{
            font-weight: 600;
            margin-bottom: 20rpx;
            font-size: 32rpx;
            color: rgba(0,0,0,0.9);
          }
          .desc{
            font-weight: 400;
            font-size: 24rpx;
            color: rgba(0,0,0,0.6);
          }
        }
      }
      .use-time{
        margin-bottom: 24rpx;
        font-weight: 500;
        font-size: 26rpx;
        color: #333333;
      }
      .info{
        font-weight: 400;
        font-size: 26rpx;
        color: #333333;
      }
    }
    .bottom{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 24rpx;
      border-top: 1rpx solid #E7E7E7;
      .price{
        font-weight: 500;
        font-size: 28rpx;
        color: rgba(0,0,0,0.9);
        line-height: 33rpx;
        text{
          font-size: 22rpx;
        }
      }
      .btn{
        width: 160rpx;
        height: 72rpx;
        line-height: 72rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #FFFFFF;
        text-align: center;
        background: #008DFF;
        border-radius: 4rpx 4rpx 4rpx 4rpx;
      }
    }
  }
</style>
